<template>
    <div v-loading="loading" style="position: relative;">
        <iframe v-show="showiframe" :id="iframeId" :style="`width: 100%;height:${iframeHeight}px`" :src="srcUrl"></iframe>
        <div v-show="!showiframe" :style="`width: 100%;height:500px;`"></div>
    </div>
</template>

<script>
    import axios from 'axios'
    var isLogin = false;

    export default {
        name: 'hgweb',
        data() {
            return {
                showiframe: false,
                loading: true,
                iframeHeight: 1500,
                srcUrl: ''
            }
        },
        props: {
            iframeUrl: {
                type: String,
                default: ''
            },
            iframeId: {
                type: String,
                default: ''
            },
            hgwebLogin: {
                type: Boolean,
                default: false
            }
        },
        mounted() {
            var hgwebIframe = document.getElementById(this.iframeId)
            if (hgwebIframe.attachEvent) {
                hgwebIframe.attachEvent("onload", this.hgWebIframeOnload);
            } else {
                hgwebIframe.onload = this.hgWebIframeOnload;
            }
        },
        methods: {
            hgWebIframeOnload() {
                if(this.srcUrl) {
                    var iframe = document.getElementById(this.iframeId);
                    var iframeDoc = iframe.document || iframe.contentDocument;
                    if (iframeDoc && iframeDoc.children.length > 0) {
                        var iframeHtml = iframeDoc.children[0];
                        this.iframeHeight = iframeHtml.offsetHeight;
                    } else {
                        this.iframeHeight = 1500;
                    }
                    this.loading = false;
                }
            }
        },
        watch: {
            hgwebLogin(val) {
                if (val) {
                    this.showiframe = true;
                    this.srcUrl = `/hgweb/${this.iframeUrl}`;
                }
            },

        }
    }
</script>

<style>
</style>